<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/city.css">
</head>
<body>
    <div class="head">
        <div class="top">

        </div>

        <div class="top-1">
            <img width="200px" src="../images/city/cat.png">

            <div class="top-2">
                <div class="h1-top">
                    <h1 class="">
                        <span>城市</span>
                        广州
                    </h1>
                </div>

                <div class="span-top">
                    <span>
                        <a href="https://qzone.qq.com/">首页</a>
                        &nbsp;广州
                    </span>

                    <div class="layui-form">
                        <input type="radio" name="AAA" value="1" title="排序方式:按价格">
                    </div>
            </div>

            <div class="layui-btn-container">
                <button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-tab">国内·港澳台酒店></button>
                <button type="button" class="layui-btn layui-btn-primary" lay-on2="test-tips-tab">海外酒店></button>
            </div>

            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                <div>
                    <div>
                        <img width="500" height="270" src="https://www.hilton.com.cn/file/images/20180212/20180212113912013tsleK0j_thum_mid.jpg">
                        <span class="tu">佛山希尔顿酒店</span>
                    </div>

                    <div class="top-bai">
                        <p class="quYu">毗邻佛山新CBD、祖庙岭南天地</p>
                        <span class="jiaGe">
                            CNY 1139<i class="i"> 起</i>
                        </span>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                <div>
                    <div>
                        <img width="500" height="270" src="https://www.hilton.com.cn/file/images/20221227/20221227162253998mrbpklJ_thum_mid.jpeg">
                        <span class="tu">佛山顺德海骏达希尔顿酒店</span>
                    </div>

                    <div class="top-bai">
                        <p id="qyu" class="quYu">位于容桂中心区域，与海骏达城无缝连接</p>
                        <span id="jg" class="jiaGe">
                          CNY 1139<i class="i"> 起</i>
                        </span>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
                <div>
                    <div>
                        <img id="jd-tu" width="500" height="270" src=''>
                        <span id="jd-name" class="tu"></span>
                    </div>

                    <div class="top-bai">
                        <p class="quYu" id="jd-qy"></p>
                         <span class="jiaGe">
                            CNY <span id="jd-jg"></span><i class="i"> 起</i>
                         </span>
                    </div>
                </div>
            </div>

        </div>

        <script src="../layui/layui.js"></script>
        <script>
            layui.use(function(){
                var layer = layui.layer;
                var util = layui.util;
                // 事件
                util.on('lay-on', {
                    'test-tips-tab': function(){
                        layer.tab({
                            area: ['600px', '300px'],
                            tab: [{
                                title: '热门',
                                content: '<div style="padding: 16px;">ABCDE</div>'
                            }, {
                                title: 'ABCDE',
                                content: '<div style="padding: 16px;">ABCDE</div>'
                            }, {
                                title: 'FGHIJ',
                                content: '<div style="padding: 16px;">FGHIJ</div>'
                            }],
                            shadeClose: true
                        });
                    },
                })
            });

            layui.use(function(){
                var layer = layui.layer;
                var util = layui.util;
                // 事件
                util.on('lay-on2', {
                    'test-tips-tab': function(){
                        layer.tab({
                            area: ['600px', '300px'],
                            tab: [{
                                title: '热门',
                                content: '<div style="padding: 16px;">哦</div>'
                            }, {
                                title: 'ABCDE',
                                content: '<div style="padding: 16px;">哦</div>'
                            }, {
                                title: 'FGHIJ',
                                content: '<div style="padding: 16px;">哦</div>'
                            }],
                            shadeClose: true
                        });
                    },
                })
            });

            layui.use(['jquery','form',],function(){
                // 实例化动态表格的实例对象
                let $ = layui.jquery;
                let form = layui.form;

                    $.ajax({
                        url: '/crh/listName?cityName=北京',
                        type: 'get',
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                // 循环遍历数组或集合
                                $.each(res.data, function (index, obj) {
                                    $('#jd-tu').prop("src",'../images/jdtu/default.jpg');
                                    $('#jd-name').append('<span id="jiudian" class="tu">'+obj.hotelName+'</span>');
                                    $('#jd-qy').append('<p class="quYu" id="jd-qy">'+obj.hotelLocation+'</p>');
                                    $('#jd-jg').append('<span id="jd-jg">'+obj.roomPrice+'</span>');

                                });

                                // 重新渲染表单
                                form.render('select');
                            }
                        }
                    });

                });
        </script>
    </div>

</body>
</html>